<template>
	<div>
		<div class="moheader">
			<div class="title">
				<div class="input">
					<input v-model="ssuotxt" type="text" placeholder="请输入您想要的内容" />
					<span @click="allSearches(ssuotxt)" class="iconfont icon-fangdajing iconspan"></span>
					<div class="gjc">
						<span>热搜词：</span>
						<ul>
							<li @click="allSearches(item)" v-for="(item, index) in allSearch" :key="index">
								{{ item }}
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div style="height:48px;"></div>
	</div>
</template>
<script>
	//juqery
	export default {
		data() {
			return {
				searchKey: [],
				allSearch: [],
				ssuotxt:'',
			};
		},
		methods: {
			allSearches(item) {
				this.$uniRouter.push({
					path: "/search",
					query: {
						whereName: item,
					},
				});
			},
			getSear() {
				// 获取搜索
				this.$httphelper.get("/api/Lm/GetSearchKeyWords")
					.then((res) => {
						this.allSearch = res.data.data;
					})
					.catch((e) => {
						console.log(e);
					});
			},
		},
		created() {
			this.getSear();
		},
	};
</script>

<style lang="less" scoped>
	.moheader {
		width: 100%;
		background: #003c80;
		position: fixed;
		// top: 45px;
		z-index: 999;

		.title {
			width: 100%;
			position: relative;
			padding-bottom: 30rpx;
			.input {
				width: 92% !important;
				margin: 0 auto;
				padding-top: 20rpx;
				position: relative;

				input {
					height: 72rpx;
					outline: none;
					border: none;
					background: #ffffff;
					padding-left: 40rpx;
					padding-right: 100rpx;
					border-radius: 36rpx;
				}

				input::-webkit-input-placeholder {
					/* WebKit browsers */
					color: rgba(60, 60, 67, 0.13);
					font-size: 28rpx;
				}

				.iconspan {
					position: absolute;
					right: 16rpx;
					bottom: 72rpx;
				}

				.gjc {
					margin-top: 20rpx;
					span {
						color: rgba(255, 255, 255, 0.62);
						float: left;
						left: 0rpx;
						bottom: 0;
						width: 98rpx;
						font-size: 24rpx;
						margin-left: 50rpx;
					}
					ul {
						padding: 0;
						display: flex;
						margin-left: 80rpx;
						li {
							font-size: 26rpx;
							cursor: pointer;
							list-style: none;
							color: rgba(255, 255, 255, 0.62);
						}

						li:nth-child(n+2) {
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}

	@media screen and (min-width: 1010px) {
		.moheader {
			display: none;
		}
	}
</style>
